<template>
    <main class="main">
        <ShowSomething />
        <p></p>
        <x-form :onSubmit="handleSubmit">
            <form-item name="username" :rules="usernameRules" v-slot="{handleInput}">
                <input type="text" @input="handleInput">
            </form-item>
            <form-item name="password" :rules="passwordRules" v-slot="{handleInput}">
                <input type="password" @input="handleInput"/>
            </form-item>
            <form-item>
                <button type="submit">
                    submit
                </button>
            </form-item>
        </x-form>
    </main>
</template>

<script>
import ShowSomething from './components/show-somthing.vue'
import loadingHoc from '@/components/HOC/LoadingHoc'
import FormItem from './components/form-item.vue'
import Form from './components/form.vue'
const getData = () => {
    return new Promise((res,rej) => {
        setTimeout(() => {
            res('result')
        }, 1000);
    })
}
const hoc = loadingHoc(ShowSomething,getData)

const rules = {
    'username': (value) => {
        if(value === ''){
            return Promise.reject('用户名不能为空')
        }else if(value.length > 20){
            return Promise.reject('用户名不能超过20个字符')
        }else {
            return Promise.resolve()
        }
    },
    'password': [
        (value) => {
            if(!/^[0-9a-zA-Z]{6,20}/.test(value)){
                return Promise.reject('密码应为6-20位字母或数字')
            }
            return Promise.resolve()
        }
    ]
}

export default {
    name: 'Test',
    components:{
        ShowSomething: hoc,
        FormItem,
        XForm: Form
    },
    data(){
        return {
            usernameRules:[
                rules.username
            ],
            passwordRules: rules.password
        }
    },
    methods:{
        handleSubmit(formData){
            console.log(formData);
        }
    }
}
</script>

<style lang="less">
    .main {
        margin: 24px;

        input {
            height: 36px;
            padding: 4px;
            width: 50%;
            border:1px solid aqua;
            outline: none;
            &:focus {
                outline: none;
                border: 2px solid aqua;
                box-shadow: 0 0 10px aqua;
            }
        }

        button {
            width: 50%;
            height: 36px;
            background: blue;
            color: #fff;
            border: none;
            border-radius: 6px;
        }
    }
</style>